<template>
		<div class="lunbo" @mouseover='cleartimer' @mouseout="settimer">
				<ul>
					<li :class="arr[0]"><img src="/images/ad-2.jpg" alt=""></li>
					<li :class="arr[1]"><img src="/images/ad-3.jpg" alt=""></li>
					<li :class="arr[2]"><img src="/images/ad-4.jpg" alt=""></li>
				</ul>
			<ol>
				<li :class='arr[0]=="xian"?"hong":"hei"'></li>
				<li :class='arr[1]=="xian"?"hong":"hei"'></li>
				<li :class='arr[2]=="xian"?"hong":"hei"'></li>
			</ol>
			<span class="sleft" @click='sleft'>&lt;</span>
			<span class="sright" @click='sright'>&gt;</span>
		</div>
</template>
<script>
	export default {
		name:'lunbo',
		props:{},
		data(){
		  return {
			arr:["xian","yin","yin"],
			index:0,
			timer:null,
		  }
		},
		components:{},
		mounted(){
			this.timer=setInterval(()=>{
				this.index++
				if(this.index==3){
					this.index=0
				}
				for(let i=0;i<this.arr.length;i++){
					this.arr[i]="yin"
				}
				this.$set(this.arr, this.index, 'xian')
			},3000)
		},
		updated(){},
		methods:{
			cleartimer(){
				clearInterval(this.timer);
				this.timer = null;
			},
			settimer(){
				this.timer=setInterval(()=>{
					this.index++
					if(this.index==3){
						this.index=0
					}
					for(let i=0;i<this.arr.length;i++){
						this.arr[i]="yin"
					}
					this.$set(this.arr, this.index, 'xian')
				},3000)
			},
			sright(){
				clearInterval(this.setint)
				this.index++
				if(this.index==3){
					this.index=0
				}
				for(let i=0;i<this.arr.length;i++){
					this.arr[i]="yin"
				}
				this.$set(this.arr, this.index, 'xian')
			},
			sleft(){
				this.index--
				if(this.index==-1){
					this.index=2
				}
				for(let i=0;i<this.arr.length;i++){
					this.arr[i]="yin"
				}
				this.$set(this.arr, this.index, 'xian')
			}
		}
	}
</script>

<style>
	.lunbo ol .hong{
		background-color: red;
		}
	.lunbo ol .hei{
		background-color: #000;
	}
	.xian{
		opacity: 1;
	}
	.yin{
		opacity: 0;
	}
	.lunbo{
		width:1200px;
		height:500px;
		position: relative;
		margin:0px auto;
		margin-bottom: 100px;
		/* overflow: hidden; */
	}
	.lunbo ul{
		height: 500px;
		position: relative;
	}
	.lunbo ul li{
		position: absolute;
		transition: all 2s;
	}
	.lunbo li img{
		width:1200px;
		height:500px;
	}
	.lunbo ol{
		width:100px;
		height:30px;
		background:#ccc;
		border-radius: 30px;
		position:absolute;
		bottom:10px;
		left:50%;
		display: flex;
		justify-content: space-around;
		transform: translateX(-50%);
		align-items: center;
	}
	.lunbo ol li{
		width:15px;
		height: 15px;
		background-color: #000;
		border-radius: 50%;
		cursor: pointer;
	}
	.lunbo span{
		width:50px;
		height: 50px;
		line-height: 50px;
		font-size:46px;
		font-weight: bold;
		color:#fff;
		text-align: center;
		position: absolute;
		border-radius: 50%;
		top:50%;
		transform:translateY(-50%);
		cursor: pointer;
	}
	.lunbo span:hover{
		background:rgb(248, 60, 0,.9);
	}
	.lunbo .sright{
		right:0px;
	}
	.lunbo .act{
		background:red;
	}
</style>
